<template>
  <div style="width: 100%">
    <div class="psxbox">
      <div class="onerow">
        <!-- 显示 echarts 的容器 -->
        <div id="tu1" style="width: 600px; height: 270px" ref="echarts-container"></div>
        <div id="tu2" style="width: 517px; height: 311px; border: 1px solid #e7e7e7" ref="echarts-container2"></div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="num" label="普通用户" width="180"> </el-table-column>
          <el-table-column prop="num1" label="lv.1用户" width="180"> </el-table-column>
          <el-table-column prop="num2" label="lv.2用户"> </el-table-column>
          <el-table-column prop="num3" label="lv.3用户"> </el-table-column>
          <el-table-column prop="num4" label="lv.4用户"> </el-table-column>
          <el-table-column prop="num5" label="lv.5用户"> </el-table-column>
          <el-table-column prop="num6" label="lv.6用户"> </el-table-column>
          <el-table-column prop="num7" label="lv.7用户"> </el-table-column>
        </el-table>
      </div>
      <!-- 中国地图 -->
      <div class="chain">
        <!-- 写个div用来留给Echart来画图 -->
        <div ref="mymap" style="width: 955px; height: 446px; border: 1px solid #e7e7e7">
          <img src="http://127.0.0.1:7001/public/whjpng/ditu.png" alt="" />
        </div>
      </div>
      <!-- 纵向图 -->
      <div class="claso">
        <div id="tu3" style="width: 961px; height: 600px; border: 1px solid #e7e7e7" ref="echarts-container3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
// import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, BarChart, GridComponent, MarkLineComponent, LabelLayout])

export default {
  name: 'app',
  data: function () {
    return {
      tableData: [
        {
          num: '2345个',
          num1: '654个',
          num2: '123个',
          num3: '354个',
          num4: '217个',
          num5: '321个',
          num6: '214个',
          num7: '24个',
        },
      ],
      // 以后要修改表格,直接修改 options 里的参数就可以
      options: {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1, name: 'lv.1用户' },
              { value: 10, name: 'lv.2用户' },
              { value: 5, name: 'lv.3用户' },
              { value: 10, name: 'lv.4用户' },
              { value: 3, name: 'lv.5用户' },
              { value: 5, name: 'lv.6用户' },
              { value: 4, name: 'lv.7用户' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      options2: {
        title: {
          text: '占比',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 50, name: '男' },
              { value: 48, name: '女' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      options3: {
        title: {
          text: '会员增长情况',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '一月',
            type: 'bar',
            emphasis: {
              focus: 'series',
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: '二月',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series',
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: '三月',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series',
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: '四月',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series',
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: '五月',
            type: 'bar',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
              focus: 'series',
            },
            markLine: {
              lineStyle: {
                type: 'dashed',
              },
              data: [[{ type: 'min' }, { type: 'max' }]],
            },
          },
          {
            name: '六月',
            type: 'bar',
            barWidth: 5,
            stack: 'Search Engine',
            emphasis: {
              focus: 'series',
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120],
          },
        ],
      },
    }
  },
  methods: {
    // 中国地图
    // getEchartData() {
    //   // 通过ref 获取我们的DOM元素
    //   const mymap = this.$refs.mymap;

    //   //   写个随机数 随机给每个省赋值
    //   function randomData() {
    //     return Math.round(Math.random() * 500);
    //   }

    //   // 当我们DOM确实是存在的我们再去绘制我们的echart图标
    //   if (mymap) {
    //     const myChart = this.$echarts.init(mymap);
    //     // 参数信息 最主要的就是 这个参数配置，很重要！！ 最好对照官网api
    //     const option = {
    //       tooltip: {},
    //       legend: {
    //         orient: "vertical",
    //         left: "left",
    //         data: [""],
    //       },
    //       visualMap: {
    //         min: 0,
    //         max: 1500,
    //         left: "10%",
    //         top: "bottom",
    //         text: ["高", "低"],
    //         calculable: true,
    //         color: ["#0b50b9", "#c3e2f4"],
    //       },
    //       selectedMode: "single",
    //       series: [
    //         {
    //           name: "",
    //           type: "map",
    //           mapType: "china",
    //           itemStyle: {
    //             normal: {
    //               borderColor: "rgba(0, 0, 0, 0.2)",
    //             },
    //             emphasis: {
    //               shadowOffsetX: 0,
    //               shadowOffsetY: 0,
    //               shadowBlur: 20,
    //               borderWidth: 0,
    //               shadowColor: "rgba(0, 0, 0, 0.5)",
    //             },
    //           },
    //           showLegendSymbol: true,
    //           label: {
    //             normal: {
    //               show: true,
    //             },
    //             emphasis: {
    //               show: true,
    //             },
    //           },
    //           data: [
    //             { name: "北京", value: randomData() },
    //             { name: "天津", value: randomData() },
    //             { name: "上海", value: randomData() },
    //             { name: "重庆", value: randomData() },
    //             { name: "河北", value: randomData() },
    //             { name: "河南", value: randomData() },
    //             { name: "云南", value: randomData() },
    //             { name: "辽宁", value: randomData() },
    //             { name: "黑龙江", value: randomData() },
    //             { name: "湖南", value: randomData() },
    //             { name: "安徽", value: randomData() },
    //             { name: "山东", value: randomData() },
    //             { name: "新疆", value: randomData() },
    //             { name: "江苏", value: randomData() },
    //             { name: "浙江", value: randomData() },
    //             { name: "江西", value: randomData() },
    //             { name: "湖北", value: randomData() },
    //             { name: "广西", value: randomData() },
    //             { name: "甘肃", value: randomData() },
    //             { name: "山西", value: randomData() },
    //             { name: "内蒙古", value: randomData() },
    //             { name: "陕西", value: randomData() },
    //             { name: "吉林", value: randomData() },
    //             { name: "福建", value: randomData() },
    //             { name: "贵州", value: randomData() },
    //             { name: "广东", value: randomData() },
    //             { name: "青海", value: randomData() },
    //             { name: "西藏", value: randomData() },
    //             { name: "四川", value: randomData() },
    //             { name: "宁夏", value: randomData() },
    //             { name: "海南", value: randomData() },
    //             { name: "台湾", value: randomData() },
    //             { name: "香港", value: randomData() },
    //             { name: "澳门", value: randomData() },
    //           ],
    //         },
    //       ],
    //     };
    //     // 设置参数
    //     myChart.setOption(option);
    //     // 当页面的大小变化时，去重置echart的大小
    //     window.addEventListener("resize", function () {
    //       myChart.resize();
    //     });
    //   }
    //   // 通过$on 或 $once 监听页面生命周期销毁来移除监听
    //   this.$on("hook:destroyed", () => {
    //     window.removeEventListener("resize", function () {
    //       myChart.resize();
    //     });
    //   });
    // },
    // },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs['echarts-container'])
      let myChart2 = echarts.init(this.$refs['echarts-container2'])
      let myChart3 = echarts.init(this.$refs['echarts-container3'])

      myChart.setOption(this.options)
      myChart2.setOption(this.options2)
      myChart3.setOption(this.options3)
    },
  },
  mounted() {
    this.createEcharts()
  },
}
</script>
<style>
.psxbox {
  width: 90%;
  height: 95%;
  margin-top: 15px;
  padding: 20px;
  margin-left: 50px;
}
.onerow {
  display: flex;
  justify-content: space-between;
}
.table {
  margin-top: 30px;
}
.claso {
  width: 100%;
  display: flex;
  margin-top: 30px;
  justify-content: space-around;
}
.chain {
  width: 100%;
  display: flex;
  margin-top: 30px;
  justify-content: space-around;
}
</style>
